<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>对话框</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="../button/button.css">
    <link rel="stylesheet" href="../mask.css">
    <link rel="stylesheet" href="./dialog.css">
</head>
<body>
<div class="page js_show">
    <div class="page__hd">
        <h1 class="page__title">Dialog</h1>
        <p class="page__desc">对话框</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="btn btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
        <a href="javascript:;" class="btn btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
        <a href="javascript:;" class="btn btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
        <a href="javascript:;" class="btn btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
    </div>

    <div id="dialogs">
        <!--BEGIN dialog1-->
        <div class="js_dialog" id="iosDialog1" style="opacity: 0; display: none;">
            <div class="mask"></div>
            <div class="dialog">
                <div class="dialog__hd"><strong class="dialog__title">弹窗标题</strong></div>
                <div class="dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                <div class="dialog__ft">
                    <a href="javascript:;" class="dialog__btn dialog__btn_default">辅助操作</a>
                    <a href="javascript:;" class="dialog__btn dialog__btn_primary">主操作</a>
                </div>
            </div>
        </div>
        <!--END dialog1-->

        <!--BEGIN dialog2-->
        <div class="js_dialog" id="iosDialog2" style="opacity: 0; display: none;">
            <div class="mask"></div>
            <div class="dialog">
                <div class="dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                <div class="dialog__ft">
                    <a href="javascript:;" class="dialog__btn dialog__btn_primary">知道了</a>
                </div>
            </div>
        </div>
        <!--END dialog2-->
        <!--BEGIN dialog3-->
        <div class="js_dialog" id="androidDialog1" style="opacity: 0; display: none;">
            <div class="mask"></div>
            <div class="dialog skin_android">
                <div class="dialog__hd"><strong class="dialog__title">弹窗标题</strong></div>
                <div class="dialog__bd">
                    弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                </div>
                <div class="dialog__ft">
                    <a href="javascript:;" class="dialog__btn dialog__btn_default">辅助操作</a>
                    <a href="javascript:;" class="dialog__btn dialog__btn_primary">主操作</a>
                </div>
            </div>
        </div>
        <!--END dialog3-->

        <!--BEGIN dialog4-->
        <div class="js_dialog" id="androidDialog2" style="opacity: 0; display: none;">
            <div class="mask"></div>
            <div class="dialog skin_android">
                <div class="dialog__bd">
                    弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                </div>
                <div class="dialog__ft">
                    <a href="javascript:;" class="dialog__btn dialog__btn_default">辅助操作</a>
                    <a href="javascript:;" class="dialog__btn dialog__btn_primary">主操作</a>
                </div>
            </div>
        </div>
        <!--END dialog4-->
    </div>
</div>
<script src="../zepto.min.js"></script>
<script>

    $(function(){
        var $iosDialog1 = $('#iosDialog1'),
            $iosDialog2 = $('#iosDialog2'),
            $androidDialog1 = $('#androidDialog1'),
            $androidDialog2 = $('#androidDialog2');
        $('#dialogs').on('click', '.dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(100);
        });
        $('#showIOSDialog1').on('click', function(){
            $iosDialog1.fadeIn(100);
        });
        $('#showIOSDialog2').on('click', function(){
            $iosDialog2.fadeIn(100);
        });
        $('#showAndroidDialog1').on('click', function(){
            $androidDialog1.fadeIn(100);
        });
        $('#showAndroidDialog2').on('click', function(){
            $androidDialog2.fadeIn(100);
        });
    });

    function dialog_1(title,msg,fnTrue,fnFalse,fnTrueTip,fnFalseTip,iosOrAndroid) {
        var str='<div class="js_dialog" id="dialog_1" style="opacity: 1; display: block;"> ' +
            '<div class="mask"></div> ' +
            '<div class="dialog"> ' +
            '<div class="dialog__hd"><strong class="dialog__title">'+title+'</strong></div> ' +
            '<div class="dialog__bd">'+msg+'</div> ' +
            '<div class="dialog__ft"> ' +
            '<a href="javascript:;" class="dialog__btn dialog__btn_default">'+fnFalseTip+'</a> ' +
            '<a href="javascript:;" class="dialog__btn dialog__btn_primary">'+fnTrueTip+'</a> ' +
            '</div> </div> </div>';
        $("body").append(str);
        $("#dialog_1 .mask").click(function (e) {
            $("#dialog_1").remove()
        })
        $("#dialog_1 .dialog__btn_default").click(function (e) {
            fnFalse&&fnFalse()
            $("#dialog_1").remove()
        })
        $("#dialog_1 .dialog__btn_primary").click(function (e) {
            fnTrue&&fnTrue();
            $("#dialog_1").remove()
        })
    }



</script>
</body>
</html>